<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Denzdii CSS3tutsplus</title>
<link href='http://under-88.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href="style/style-reset.css" rel="stylesheet" type="text/css"/>
<link href='https://plus.google.com/117690544352523175338' rel='author'/>
<link href='https://plus.google.com/117690544352523175338' rel='publisher'/>
<meta content="Blogger Tutorial Plus Free Blogger Templates,blogger tutorial, Blogger template, tips dan trik blog,SEO Blogger,javascript, css" name='keywords'/>
<meta content="demo tutorial blogger css jquery moderration plugin blog' name='description"/>
<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type='text/javascript' src='js/jquery.js'></script>
    </head>
    <body>
<div id="topBar">
	<div id="topLimiter">
		<h1><a id="logo" title="Home" href="http://under-88.blogspot.com/">CSS TutsPlus - PHP MySQL CSS jQuery XHTML tutorials, resources and freebies.</a></h1>
        
        <ul id="navigation">
<li><div><a class="level0" href="#tabs1">Tutorials</a>
<ul class="level1">
<li><div><a class="level1" href="http://under-88.blogspot.com/search/label/CSS?max-results=5">CSS</a></div></li>
<li><div><a class="level1" href="http://under-88.blogspot.com/search/label/jQuery?max-results=5">Jquery</a></div></li>
<li><div><a class="level1" href="http://under-88.blogspot.com/search/label/Javascript?max-results=5">Javascript</a></div></li>
<li><div><a class="level1" href="http://under-88.blogspot.com/search/label/HTML?max-results=5">HTML</a></div></li>
</ul>
<span class="topMenuIcon"></span></div></li>
<li><div><a class="level0" href="#tabs2">Articles</a>
<ul class="level1">
<li><div><a class="level1" href="http://under-88.blogspot.com/search/label/Blog-Tricks?max-results=5">Tips And Triks</a></div></li>
<li><div><a class="level1" href="#">Blogger</a></div></li>
<li><div><a class="level1" href="http://under-88.blogspot.com/search/label/SEO-Friendly?max-results=5">SEO</a></div></li>
</ul>
<span class="topMenuIcon"></span></div></li>
<li><div><a class="level0" href="#tabs3">Plugin</a>
<ul class="level1">
<li><div><a class="level1" href="http://under-88.blogspot.com/p/css-compressor.html">CSS Compressor</a></div></li>
<li><div><a class="level1" href="http://under-88.blogspot.com/p/css-cubic-bezier-editor.html">CSS Cubic Bezier</a></div></li>
<li><div><a class="level1" href="http://under-88.blogspot.com/p/css-gradient-generator.html">CSS Gradient</a></div></li>
<li><div><a class="level1" href="http://under-88.blogspot.com/p/tool-parse.html">HTML Convert</a></div></li>
</ul>
<span class="topMenuIcon"></span></div></li>
<li><div><a class="level0" href="#tabs4">Design</a>
<ul class="level1">
<li><div><a class="level1" href="#">Templates</a></div></li>
<li><div><a class="level1" href="#">PSD</a></div></li>
</ul>
<span class="topMenuIcon"></span></div></li>
</ul>
        <div id="searchForm">
<div id="cse-search-form" style="color:#faf6fa;"></div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('002577119024778143861:a6vwqtpq5ji');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    options.enableSearchboxOnly("http://under-88.blogspot.com/p/cari-artikel.html");
    customSearchControl.draw('cse-search-form', options);
  }, true);
</script>
<link href="style/cse.css" rel="stylesheet" type="text/css"/>
<style type='text/css'>
.cse input.gsc-search-button, input.gsc-search-button{display:none!important;}
</style>
        </div>
    </div>
</div>
  <article class="main-content">
          <div class="container">
			<header>
				<h1>Accordion <span>with CSS3</span></h1>
				<h2>Sebuah akordeon konten yang sederhana dengan menggunakan combinator :checked pseudo-class</h2>
			</header>
<div class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" checked />
	<label for="ac-1">Kabogoh Aing</label>
	<article class="ac-small">
		<p><a href="/" style="float:left; margin-right:0.5em;"><img alt="denzdii" src="images/danish.jpg" width="100" height="100"/></a>Namanya Danisha, Dia sekarang kulliah di salah satu universitas kota Bandung, orangnya baik hati,cantik dan sangat mudah untuk di ajak berteman tanpa harus membeda-bedakan.</p>
	</article>
	</div>
	<div>
<input id="ac-2" name="accordion-1" type="radio" />
	<label for="ac-2">Finch</label>
		<article class="ac-medium">
	<h1 style="padding: 20px 20px 0;font-weight:bold;">Letters To You</h1>
		<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.</p>
		</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio" />
<label for="ac-3">References</label>
<article class="ac-large">
<ul class="reference">
	<li>CSS-Tuts+	- <a class="symbol" href="http://www.under-88.blogspot.com/">www.under-88.blogspot.com</a></li>
	<li>CSS-Tricks	- <a class="symbol" href="http://www.css-tricks.com/" rel="nofollow" target="_blank">www.css-tricks.com</a></li>
	<li>jQuery	- <a class="symbol" href="http://www.jquery.com/" rel="nofollow" target="_blank">www.jquery.com</a></li>
	<li>CSS-Tutorial	- <a class="symbol" href="http://www.w3schools.com/" rel="nofollow" target="_blank">www.w3schools.com </a></li>
	<li>Web Design	- <a class="symbol" href="http://www.tympanus.net/codrops/" rel="nofollow" target="_blank">www.tympanus.net</a></li>
	<li>Red Team Design		- <a class="symbol" href="http://www.red-team-design.com/" rel="nofollow" target="_blank">www.red-team-design.com</a></li>
</ul>
<script type="text/javascript">
		$(".symbol[href^='http']").each(function() {
    $(this).css({
        background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});
		</script>
	</article>
				</div>
				<div>
<input id="ac-4" name="accordion-1" type="radio" />
<label for="ac-4">Contact</label>
	<article class="ac-large">
		<p>All the windows, Swear to miss you, And the doors are cell block tight, Sweet sedation, Sweep the issues, And the clocks about to strike Did it call you down, Are you back just yet, Waiting now please come set me free, And the only sound is a minute left.  This could be, this could be the last time  It's a chance to fix mistakes, One more for the last time, Does it blow our dreams away, Don't waste this chance with your smile 10 seconds left on this dial, This could be the last time.</p>
	</article>
</div>
</div>
        </div>
 </article>
				<div style="clear:both;"></div>
    </body>
</html>